<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { Terminal } from 'xterm';
  import { FitAddon } from 'xterm-addon-fit';
  import { WebLinksAddon } from 'xterm-addon-web-links';
  import { onMounted } from 'vue';
  import 'xterm/css/xterm.css';
  import { http } from '@/utils/http/axios';
  onMounted(() => {
    const id = useRoute().params['id'];
    http
      .request({
        url: '/api/log/' + id,
        method: 'GET',
      })
      .then((result) => {
        const term = new Terminal();
        // 创建FitAddon实例并将其与终端关联
        const fitAddon = new FitAddon();
        term.loadAddon(fitAddon);
        term.loadAddon(new WebLinksAddon());
        // 将终端实例附加到DOM元素
        term.open(document.getElementById('terminal'));
        // 设置终端大小随容器调整
        fitAddon.fit();
        term.write(result.content);
      });
  });
</script>

<template>
  <div id="terminal"></div>
</template>
